<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name = "author" content="wyrQF">
        <meta name="keywords" content="CGI开发 H5模版 千锋教育 西安物联网">
        <title>HTML5模版-主页</title>
        <!-- 引入外联样式 -->
        <style>
            /* 弹性盒子：在盒子模型（width height padding margin border-radiu )基础之上增强对齐方式 */
            div{
                margin: 10px;
                border: 1px solid blueviolet;
                width: 200px;
                height: 200px;
                overflow: hidden;
                border-radius: 20px;
            }
            img{
                padding: 0;
                margin: 0;
                height: 200px;
                width: 200px;
                border-radius: 20px;
            }
            img:hover{
                transform: scale(1.5,1.5);
                transition: all 2s;
            }
            .img-circle{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="img/GULULU-彩球罐.png" class="img-circle" width="200" height="200">
        </div>
    </body>
</html>
